<section class="content-header">
    <!-- Content Header (Page header) -->
    Turnover Report
    <div class="pull-right">
        <form class="form-inline">
            <div class="form-group">
                <select class="form-control" ng-options="div for div in years track by div" ng-model="vm.year" ng-change="vm.loadData()">
                </select>
            </div>
            <div class="form-group">
                <select class="form-control" ng-options="div for div in months track by div" ng-model="vm.month" ng-change="vm.loadData()">
                </select>
            </div>
            <div class="form-group">
                <select class="form-control" ng-options="div.name for div in regions track by div.id" ng-model="vm.region" ng-change="vm.regionChange()">
                    <option ng-if="role!='Sub-Region Admin'" value="">--- Sub-Region ---</option>
                </select>
            </div>
            <div class="form-group">
                <select class="form-control" ng-options="div.name for div in clusters track by div.id" ng-model="vm.cluster" ng-change="vm.loadData()">
                    <option value="">--- Cluster ---</option>
                </select>
            </div>
        </form>
    </div>
</section>
<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Summary report by department</h3>
                </div>
                <div class="box-body table-responsive no-padding">
                    <table ng-table="vm.tableParams" class="table table-hover table-bordered table-condensed" show-filter="true">
                        <tr ng-repeat="ret in $data">
                            <td width="300px" title="'Hotel Name'" filter="{ hotel: 'text'}" sortable="'hotel'">
                                {{ret.hotel}}</td>
                            <td title="'Engineer'" sortable="'ret.data[0].value'">
                                {{ret.data[0].value}}</td>
                            <td title="'EO'" sortable="'ret.data[1].value'">
                                {{ret.data[1].value}}</td>
                            <td title="'F&B'" sortable="'ret.data[2].value'">
                                {{ret.data[2].value}}</td>
                            <td title="'Finance'" sortable="'ret.data[3].value'">
                                {{ret.data[3].value}}</td>
                            <td title="'Front Office'" sortable="'ret.data[4].value'">
                                {{ret.data[4].value}}</td>
                            <td title="'Housekeeping'" sortable="'ret.data[5].value'">
                                {{ret.data[5].value}}</td>
                            <td title="'HR'" sortable="'ret.data[6].value'">
                                {{ret.data[6].value}}</td>
                            <td title="'S&M'" sortable="'ret.data[7].value'">
                                {{ret.data[7].value}}</td>
                            <td title="'Security'" sortable="'ret.data[8].value'">
                                {{ret.data[8].value}}</td>
                        </tr>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Summary report by time period</h3>
                </div>
                <div class="box-body table-responsive no-padding">
                    <table ng-table="vm.tableParams2" class="table table-hover table-bordered table-condensed" show-filter="true">
                        <tr ng-repeat="ret in $data">
                            <td width="300px" title="'Hotel Name'" filter="{ hotel: 'text'}" sortable="'hotel'">
                                {{ret.hotel}}</td>
                            <td title="'<3M'" sortable="'type1'">
                                {{ret.type1}}</td>
                            <td title="'3-6M'" sortable="'type2'">
                                {{ret.type2}}</td>
                            <td title="'>6M'" sortable="'type3'">
                                {{ret.type3}}</td>
                        </tr>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Summary report by band</h3>
                </div>
                <div class="box-body table-responsive no-padding">
                    <table ng-table="vm.tableParams3" class="table table-hover table-bordered table-condensed" show-filter="true">
                        <tr ng-repeat="ret in $data">
                            <td width="300px" title="'Hotel Name'" filter="{ hotel: 'text'}" sortable="'hotel'">
                                {{ret.hotel}}</td>
                            <td title="'Band 1'" sortable="'band1'">
                                {{ret.band1}}</td>
                            <td title="'Band 2'" sortable="'band2'">
                                {{ret.band2}}</td>
                            <td title="'Band 3'" sortable="'band3'">
                                {{ret.band3}}</td>
                            <td title="'Band 4'" sortable="'band4'">
                                {{ret.band4}}</td>
                            <td title="'Band 5'" sortable="'band5'">
                                {{ret.band5}}</td>
                            <td title="'Band 6'" sortable="'band6'">
                                {{ret.band6}}</td>
                            <td title="'Band 7'" sortable="'band7'">
                                {{ret.band7}}</td>
                            <td title="'Band 8'" sortable="'band8'">
                                {{ret.band8}}</td>
                            <td title="'Band 9'" sortable="'band9'">
                                {{ret.band9}}</td>
                            <td title="'Band 10'" sortable="'band10'">
                                {{ret.band10}}</td>
                        </tr>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>
    <div class="row">
        <div class="col-md-5">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Function Leaders' Turnover Summary</h3>
                    <small class="pull-right">GC level</small>
                </div>
                <div class="box-body table-responsive no-padding">
                    <table class="table table-hover">
                        <form class="form-inline">
                            <table class="table table-bordered table-condensed">
                                <tr>
                                    <th>Function Leaders</th>
                                    <th>YTD%</th>
                                    <th>Pro-rate</th>
                                    <th>Target</th>
                                </tr>
                                <tr ng-repeat="ret in vm.result2">
                                    <td>{{ret.type}}</td>
                                    <td><span class="">{{ret.ytd*100 | percentage}}</td>
                  <td ng-if="ret.target!='-1'" ng-switch="ret.target!=''&&ret.rate*100>ret.target">
                   <span ng-switch-when="true" class="badge bg-red">{{ret.rate*100 | percentage}}</span>
                                        <span ng-switch-when="false" class="badge bg-green">{{ret.rate*100 | percentage}}</span>
                                    </td>
                                    <td ng-if="ret.target=='-1'">{{ret.rate*100 | percentage}}</td>
                                    <td>{{ret.target!='-1'?ret.target+'%':'N/A'}}</td>
                                </tr>
                            </table>
                        </form>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <div class="col-md-7">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Turnover Exit Interview Summary</h3>
                </div>
                <div class="box-body margin" style="height:280px">
                    <pie-chart config="config" data="data3"></pie-chart>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Turnover Exit Interview</h3>
                </div>
                <div class="box-body margin" style="height:330px">
                    <bar-chart config="configBar" data="data"></bar-chart>
                    <!-- <pie-chart config="config" data="data"></pie-chart> -->
                </div>
            </div>
        </div>
    </div>
</section>
